<h3>类型</h3>
<h4>基本类型</h4>
<p>将下拉菜单触发器和下拉菜单都包裹在.dropdown里，或者另一个声明了position:
relative;的元素。然后添加组成菜单的HTML代码。</p>
<p>通过是否指定data-toggle=&#39;dropdown&#39;来开关下拉菜单。</p>
<div class="example dropdown">
  <button class="btn dropdown-toggle" type="button" data-toggle=
  "dropdown">操作</button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">Dropdown header</li>
    <li>
      <a href="#">编辑</a>
    </li>
    <li>
      <a href="#">删除</a>
    </li>
    <li role="presentation" class="dropdown-header">Dropdown header</li>
    <li>
      <a href="#">修改</a>
    </li>
  </ul>
</div><!-- /example -->
<h4>导航条下来菜单</h4>
<div class="example">
  <ul class="nav nav-primary">
    <li class="active">
      <a href="#">首页</a>
    </li>
    <li>
      <a href="#">演示</a>
    </li>
    <li>
      <a href="#">下载</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">团队</a>
      <ul class="dropdown-menu">
        <li>
          <a href="#">关于我们</a>
        </li>
        <li>
          <a href="#">开发计划</a>
        </li>
        <li>
          <a href="#">开源代码</a>
        </li>
        <li>
          <a href="#">团队博客</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h4>标签下拉菜单</h4>
<div class="example dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href=
  "/page.html">操作</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li>
      <a href="#">编辑</a>
    </li>
    <li>
      <a href="#">删除</a>
    </li>
    <li>
      <a href="#">修改</a>
    </li>
  </ul>
</div>
<h4>按钮下拉菜单</h4>
<div class="example">
  <div class="btn-group">
    <button class="btn dropdown-toggle" type="button" id="dropdownMenu1"
    data-toggle="dropdown">操作</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li>
        <a href="#">编辑</a>
      </li>
      <li>
        <a href="#">删除</a>
      </li>
      <li>
        <a href="#">修改</a>
      </li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn">操作</button> <button type="button" class=
    "btn dropdown-toggle" data-toggle="dropdown"> <span class="sr-only">Toggle
    Dropdown</span></button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a href="#">编辑</a>
      </li>
      <li>
        <a href="#">删除</a>
      </li>
      <li>
        <a href="#">增加</a>
      </li>
    </ul>
  </div>
</div>
<h3>变化</h3>
<h4>弹出方式</h4>
<div class="example">
  <div class="btn-group">
    <button type="button" class="btn">默认向下</button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a href="#">div.btn-group</a>
      </li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn">下右</button>
    <ul class="dropdown-menu pull-right" role="menu">
      <li>
        <a href="#">div.btn-group &gt; ul.dropdown-menu.pull-right</a>
      </li>
    </ul>
  </div>
  <div class="btn-group dropup">
    <button type="button" class="btn">向上</button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <a href="#">div.btn-group.dropup</a>
      </li>
    </ul>
  </div>
  <div class="btn-group dropup">
    <button type="button" class="btn">向右</button>
    <ul class="dropdown-menu pull-right" role="menu">
      <li>
        <a href="#">div.btn-group.dropup &gt; ul.dropdown-menu.pull-right</a>
      </li>
    </ul>
  </div>
</div>
<h4>下拉菜单的子菜单</h4>
<div class="example btn-group dropup">
  <button type="button" class="btn">编辑</button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li>
      <a tabindex="-1" href="#">关闭</a>
    </li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">评审</a>
      <ul class="dropdown-menu">
        <li>
          <a tabindex="-1" href="#">确认通过</a>
        </li>
        <li>
          <a tabindex="-1" href="#">有待明确</a>
        </li>
        <li class="dropdown-submenu">
          <a tabindex="-1" href="#">拒绝</a>
          <ul class="dropdown-menu">
            <li>
              <a tabindex="-1" href="#">已完成</a>
            </li>
            <li>
              <a tabindex="-1" href="#">延期</a>
            </li>
            <li>
              <a tabindex="-1" href="#">不做</a>
            </li>
            <li>
              <a tabindex="-1" href="#">已取消</a>
            </li>
            <li>
              <a tabindex="-1" href="#">设计如此</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">计划</a>
      <ul class="dropdown-menu">
        <li>
          <a tabindex="-1" href="#">Plan A</a>
        </li>
        <li>
          <a tabindex="-1" href="#">Plan B</a>
        </li>
        <li>
          <a tabindex="-1" href="#">Plan C</a>
        </li>
        <li>
          <a tabindex="-1" href="#">Plan D</a>
        </li>
        <li>
          <a tabindex="-1" href="#">Plan E</a>
        </li>
      </ul>
    </li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">阶段</a>
      <ul class="dropdown-menu">
        <li>
          <a tabindex="-1" href="#">未开始</a>
        </li>
        <li>
          <a tabindex="-1" href="#">已计划</a>
        </li>
        <li>
          <a tabindex="-1" href="#">已立项</a>
        </li>
        <li>
          <a tabindex="-1" href="#">研发中</a>
        </li>
        <li>
          <a tabindex="-1" href="#">研发完毕</a>
        </li>
        <li>
          <a tabindex="-1" href="#">测试中</a>
        </li>
        <li>
          <a tabindex="-1" href="#">测试完毕</a>
        </li>
        <li>
          <a tabindex="-1" href="#">已验收</a>
        </li>
        <li>
          <a tabindex="-1" href="#">已发布</a>
        </li>
      </ul>
    </li>
    <li class="dropdown-submenu pull-left">
      <a tabindex="-1" href="#">.pull-left</a>
      <ul class="dropdown-menu">
        <li>
          <a tabindex="-1" href="#">Item1</a>
        </li>
        <li>
          <a tabindex="-1" href="#">Item2</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h4>小标题和禁用</h4>
<p>通过li.dropdown-header增加小标题，为li增加.disabled来禁用。</p>
<div class="example dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1"
  data-toggle="dropdown">操作</button>
  <ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">基本操作</li>
    <li>
      <a href="#">编辑</a>
    </li>
    <li class="disabled">
      <a role="menuitem" tabindex="-1" href="#">修改</a>
    </li>
    <li class="dropdown-header">其他操作</li>
    <li>
      <a href="#">增加</a>
    </li>
  </ul>
</div><!-- /example -->
